<template>
  <div class="app-container h-auto min-h-full">
    <vxe-tabs value="13" :options="tabList">
      <template v-for="item in tabList" #[item.slots.default]>
        <components
          :is="item.slots.default"
          :key="item.title"
          class="p-5"
        ></components>
      </template>
    </vxe-tabs>
  </div>
</template>

<script>
import VisibleMethod from './components/VisibleMethod.vue'
import Cascader from './components/Cascader.vue'
import Suffix from './components/Suffix.vue'
import Input from './components/VxeInput.vue'
import Textarea from './components/VxeTextarea.vue'
import VxeSwitch from './components/VxeSwitch.vue'
import VxeButtonGroup from './components/VxeButtonGroup.vue'
import Verify from './components/Verify.vue'
import ZSelect from './components/ZSelect.vue'
import ZUpload from './components/ZUpload.vue'
import YEditor from './components/YEditor.vue'
import YPopup from './components/YPopup.vue'

export default {
  components: {
    VisibleMethod,
    Cascader,
    Suffix,
    VxeButtonGroup,
    Input,
    Textarea,
    VxeSwitch,
    Verify,
    ZSelect,
    ZUpload,
    YEditor,
    YPopup
  },
  data() {
    return {
      tabList: [
        { name: '4', title: '完整表单', slots: { default: 'Input' } },

        {
          name: '1',
          title: '字段的显示和隐藏',
          slots: { default: 'VisibleMethod' }
        },
        { name: '2', title: '级联', slots: { default: 'Cascader' } },
        {
          name: '3',
          title: '字段标题提示及插槽',
          slots: { default: 'Suffix' }
        },
        { name: '9', title: '表单校验', slots: { default: 'Verify' } },
        { name: '8', title: '按钮组', slots: { default: 'VxeButtonGroup' } },
        { name: '5', title: '文本域', slots: { default: 'Textarea' } },
        { name: '6', title: '开关', slots: { default: 'VxeSwitch' } },
        { name: '10', title: '字典选择框', slots: { default: 'ZSelect' } },
        { name: '11', title: '上传', slots: { default: 'ZUpload' } },
        { name: '12', title: '富文本', slots: { default: 'YEditor' } },
        { name: '13', title: 'Popup', slots: { default: 'YPopup' } }
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>
